﻿<template>
  <div class="box">
    <div class="box-left"></div>
    <div class="box-right">
      <!-- 注册框 -->
      <div class="box-right-bottom" ref="regbox">
        <form action="">
          <div class="register-title">
            <span>注册</span>
          </div>
          <!-- 表单验证 -->
          <div class="register-box">
            <ul>
              <li class="register-box-in">
                <input
                  type="text"
                  placeholder="请输入邮箱"
                  class="user"
                  v-model="email"
                  @blur="bluremail"
                  @focus="focusemail"
                  ref="inputemail"
                />

                <br />
                <!-- 提示输入字段  -->
                <p class="hiddenemail" ref="hiddenemail">请输入邮箱</p>

                <input
                  type="text"
                  placeholder="请输入手机号码"
                  class="user"
                  v-model="tel"
                  @blur="blurtel"
                  @focus="focustel"
                  ref="inputTel"
                />

                <br />
                <!-- 提示输入字段 -->
                <p class="hiddentel" ref="hiddentel">请输入电话号码</p>
                <div class="password-eye">
                  <input
                    type="password"
                    placeholder="请输入密码"
                    class="user"
                    v-model="password"
                    @blur="blurpassword"
                    @focus="focuspassword"
                    ref="inputPassword"
                  />
                  <img
                    :src="imgUrl"
                    alt="密码的显示隐藏"
                    class="eye"
                    ref="eyes"
                    @click="changeType"
                  />
                  <br />
                  <!-- 提示输入字段 -->
                  <p class="hiddenpassword" ref="hiddenpassword">
                    以字母开头，长度在6~18之间，只能包含字母、数字和下划线
                  </p>
                </div>

                <div class="validation-box">
                  <input
                    type="text"
                    placeholder="请输入验证码"
                    class="validation"
                    v-model="verify"
                    @blur="blurverify"
                    ref="inputVerify"
                    @focus="focusverify"
                  /><br />
                  <!-- 获取验证码按钮 -->
                  <button
                    class="obtaining-email"
                    @click.prevent="SendEmail"
                    ref="countdown"
                    :disabled="dis"
                  >
                    {{ email_verify }}
                  </button>
                </div>
                <!-- 提示输入字段 -->
                <p class="hiddenverify" ref="hiddenverify">请输入验证码</p>

                <input type="checkbox" class="checks" v-model="checkbox" />

                <span>&nbsp;&nbsp;&nbsp;已阅读并同意 </span>
                <span class="protocol" @click="userAgreement"
                  >&nbsp;博客账号用户协议&nbsp;</span
                >
                <span>和</span>
                <span class="protocol" @click="privacyAgreement"
                  >&nbsp;隐私政策&nbsp;</span
                ><br />
                <!-- 注册按钮 -->
                <button @click.prevent="registered" class="registered">
                  注册</button
                ><br />
                <!-- 已有账号？ 立即登录 -->
                <a class="other" @click="login">已有账号？ 立即登录</a>
                <a @click="gozhu" class="visitor">游客登录</a>
              </li>
            </ul>
          </div>
        </form>
      </div>

      <!-- <p class="conpany">

          博客项目组版权所有-京ICP备10046444-京公网安备11010802020134号

        </p> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "Register",

  data() {
    return {
      email: "", //邮箱
      tel: "", //电话
      verify: "", //验证码
      password: "", //密码
      flag: true, //密码显示与隐藏的时候用
      imgUrl: require("../../assets/close.png"), //密码显示与隐藏图片
      height: 570,
      email_verify: "获取邮箱验证码", //获取按钮默认值
      dis: false, //按钮警用,默认可用
      wait: 60, //获取倒计时
      checkbox: true,
      UserStatus: 0,
    };
  },

  methods: {
    //查看用户协议
    userAgreement() {
      this.$router.push({
        name: "UserAgreement",
      });
      this.$store.commit("LoginxStatus", {
        UserStatus: this.loginForm.UserStatus,
      });
    },
    //查看隐式协议
    privacyAgreement() {
      this.$router.push({
        name: "PrivacyAgreement",
      });
      this.$store.commit("LoginxStatus", {
        UserStatus: this.loginForm.UserStatus,
      });
    },
    // 不登陆直接进去主页面（游客方式）
    gozhu() {
      this.$router.push({
        name: "HomePage",
      });
      this.$store.commit("LoginxStatus", { UserStatus: this.UserStatus });
    },
    // 邮箱失去焦点
    bluremail() {
      if (!this.email) {
        this.$refs.inputemail.className = "change2 user";
        this.$refs.hiddenemail.style.display = "block";
        this.$refs.regbox.style.height = this.height + 25 + "px";
        this.height += 25;
      } else {
        this.$refs.hiddenemail.style.display = "none";
        // this.$refs.regbox.style.height=this.height-25+'px';
        // this.height-=25;
      }
    },
    // 邮箱获取焦点
    focusemail() {
      this.$refs.inputemail.className = "change1 user";
    },
    // 电话号码失去焦点
    blurtel() {
      if (!this.tel) {
        this.$refs.inputTel.className = "change2 user";
        this.$refs.hiddentel.style.display = "block";
        this.$refs.regbox.style.height = this.height + 25 + "px";
        this.height += 25;
      } else {
        this.$refs.hiddentel.style.display = "none";
        // this.$refs.regbox.style.height=this.height-25+'px';
        // this.height-=25;
      }
    },
    // 电话号码获取焦点
    focustel() {
      this.$refs.inputTel.className = "change1 user";
    },
    // 密码失去焦点
    blurpassword() {
      if (!this.password) {
        this.$refs.inputPassword.className = "change2 user";
        this.$refs.hiddenpassword.style.display = "block";
        this.$refs.regbox.style.height = this.height + 25 + "px";
        this.height += 25;
      } else {
        this.$refs.hiddenpassword.style.display = "none";
        // this.$refs.regbox.style.height=this.height-25+'px';
        // this.height-=25;
      }
    },
    // 密码获取焦点
    focuspassword() {
      this.$refs.inputPassword.className = "change1 user";
    },
    // 验证码失去焦点
    blurverify() {
      // console.log(this.$refs.hiddenverify);

      if (!this.verify) {
        this.$refs.inputVerify.className = "change2 validation";
        this.$refs.hiddenverify.style.display = "block";
        this.$refs.regbox.style.height = this.height + 25 + "px";
        this.height += 25;
      } else {
        this.$refs.hiddenverify.style.display = "none";
        // this.$refs.regbox.style.height=this.height-25+'px';
        // this.height-=25;
      }
    },
    // 验证码获取焦点
    focusverify() {
      this.$refs.inputVerify.className = "change1 validation";
    },

    // 密码的显示于隐藏
    changeType() {
      // console.log(this.$refs);
      if (this.flag) {
        this.$refs.inputPassword.type = "text";
        this.imgUrl = require("../../assets/open.png");
        this.flag = false;
      } else {
        this.$refs.inputPassword.type = "password";
        this.imgUrl = require("../../assets/close.png");
        this.flag = true;
      }
    },

    // 获取验证码
    SendEmail() {
      //  正则邮箱
      const regEmail =
        /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/;
      if (this.email) {
        if (regEmail.test(this.email)) {
          const timer = setInterval(() => {
            if (this.wait <= 0) {
              clearInterval(timer);
              this.dis = false;
              this.wait = 60;
              this.email_verify = "获取邮箱验证码";
            } else {
              this.dis = true;
              this.wait--;
              this.email_verify = "重新获取(" + this.wait + "s)";
            }
          }, 1000);
          this.$http({
            method: "post",
            url: "user/sendEmail",
            params: {
              email: this.email,
            },
          }).then(({ data }) => {
            console.log(data);
            if (data) {
               this.$message.success("验证码发送成功!");
            } else {
              this.$message.info("验证码发送失败!");
            }
          });
        } else {
          this.$message.error("邮箱格式不正确，请重新输入...");
        }
      } else {
        this.$message.error("邮箱不能为空，请填写完整...");
      }
    },
    // 登录按钮表单验证
    registered() {
      // 邮箱、电话、密码、验证、协议 都不能为空
      if (
        this.email &&
        this.verify &&
        this.tel &&
        this.password &&
        this.checkbox
      ) {
        //  正则邮箱
        const regEmail =
          /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/;
        //   正则手机号
        const regMobile = /^1[34578]\d{9}$/;
        // 正则密码，密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
        const regpassword = /^[a-zA-Z]\w{5,17}$/;
        // 测试是否复合正则规则
        if (
          regEmail.test(this.email) &&
          regMobile.test(this.tel) &&
          regpassword.test(this.password)
        ) {
          this.$http({
            method: "post",
            headers: {
              "content-Type": "application/json",
            },
            url: `user/register?code=${this.verify}`,
            data: JSON.stringify({
              email: this.email,
              telephone: this.tel,
              password: this.password,
            }),
          }).then(({ data }) => {
            // console.log(data);

            if (data.flag) {
              this.$message.success("注册成功！即将去往登录界面...");
              this.$router.push({
                name: "UserLogin",
              });
            } else {
              console.log("注册失败!");
              this.$message.error(data.errorMsg);
            }
          });
        } else {
          this.$message.error("手机号邮箱或密码格式不正确,检查后请重新输入");
          this.$router.push({
            name: "Register",
          });
        }
      } else {
        this.$message.error("注册失败！不允许为空，请填写完整...");
        this.$router.push({
          name: "Register",
        });
      }
    },
    // 已有账号，去往登录界面
    login() {
      this.$router.push({
        name: "UserLogin",
      });
    },
  },
};
</script>


<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
a {
  text-decoration: none !important;
}
/* 背景图片 */
.box {
  background: url(../../assets/3.png);
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: flex;
  background-color: #f9f9f9;
}
.box-left {
  flex: 1;
}

.box-right {
  flex: 3;
  float: left;
}

/* 注册框 */
.box-right-bottom {
  opacity: 0.8;
  position: relative;
  overflow: hidden;
  width: 470px;
  height: 570px;
  margin-top: 120px;
  margin-left: 400px;
  border-radius: 5px;
  background-color: #fff;
}
.register-title {
  margin: 20px 0 20px 60px;
}
.register-title span {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  line-height: 50px;
  border-bottom: 5px solid skyblue;
}
/* 表单验证 */
.register-box ul {
  width: 900px;
}

.register-box ul li {
  float: left;
  margin-left: 20px;
}
.register-box-in .user {
  position: relative;
  z-index: 5;
  border: none;
  outline: none;
  width: 354px;
  height: 60px;
  margin-left: 40px;
  font-size: 20px;
  background-color: #f1f1f1;
  margin-top: 10px;
  padding-left: 20px;
  border-radius: 5px;
}
.register-box-in .validation {
  position: relative;
  border: none;
  margin-top: 10px;
  padding-left: 20px;
  outline: none;
  font-size: 17px;
  width: 175px;
  height: 60px;
  margin-left: 40px;
  border-radius: 5px;
  background-color: #f1f1f1;
}
/* 获取验证码按钮 */
.obtaining-email {
  background-color: skyblue;
  position: absolute;
  right: 0;
  top: 10px;
  height: 60px;
  width: 165px;
  border-radius: 5px;
  border: none;
  font-size: 20px;
}
.obtaining-email:hover {
  cursor: pointer;
}
/* 提示输入字段 */
.hiddenemail,
.hiddentel,
.hiddenpassword,
.hiddenverify {
  display: none;
  color: red;
  font-size: 12px;
  margin: 10px 0 0 40px;
}

/* 同意隐私政策 */
.register-box-in .checks {
  width: 16px;
  height: 16px;
  vertical-align: bottom;
  margin: 30px 5px 0 60px;
}
.register-box-in span {
  font-size: 14px;
  color: #7c7c7c;
}
/* 注册按钮 */
.register-box-in .registered {
  border: none;
  margin-top: 25px;
  margin-left: 40px;
  margin-bottom: 20px;
  border-radius: 5px;
  width: 354px;
  height: 60px;
  font-size: 30px;
  color: #fff;
  font-weight: 600;
  background-color: skyblue;
}

.registered:hover {
  cursor: pointer;
  color: #4b4b4b;
}

/* 已有账号？ 立即登录 */
.register-box-in .other {
  margin-top: 400px;
  margin-left: 80px;
  font-size: 17px;
  color: #aaaaaa;
  border-bottom: 1px solid #838383;
}
.register-box-in .other:hover,
.visitor:hover {
  color: skyblue;
  border-color: skyblue;
}
/* 游客登录 */
.visitor {
  margin-left: 30px;
  color: #aaaaaa;
  border-bottom: 1px solid #838383;
}

/* 表单获取焦点样式 */
.change1::placeholder {
  position: absolute;
  top: 5px;
  left: 20px;
  font-size: 12px;
  color: #c1c1c1;
  transition: all 0.3s;
}
.change2::placeholder {
  font-size: 17px;
  color: red;
  transition: all 0.3s;
}

.validation-box {
  position: relative;
}
/* 密码显示与隐藏位置 */
.password-eye {
  position: relative;
}
.eye {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 15px;
  width: 30px;
  height: 30px;
}
/* 协议 */
.protocol:hover {
  cursor: pointer;
  color: skyblue;
  border-color: skyblue;
}
</style>